<template>
	<view class="work-order-page">
		<view class="work-style">
			<view style="width: 90%;display: flex;justify-content: center;align-items: center;">
				<u-search v-model="screeningForm.title" shape="round" placeholder="请输入搜索关键词" @search="onQuery"
					@custom="onQuery" />
				<u-button style="margin-left: 10rpx;" type="primary" size="mini" shape="circle"
					@click="showScreen = true">筛选</u-button>
			</view>
		</view>
		<view class="work-order-list" style="height: calc(100% - 4rem); overflow: auto">
			<view v-for="workOrder in workOrderList" :key="workOrder.id"
				class="simple-card work-order-card m-t-1rem m-x-1rem m-b-1rem"
				@click="onShowWorkOrderDetail(workOrder)">
				<view class="simple-header">
					<view class="simple-title">
						<!-- <i class="simple-circle" :style="{ color:workOrderStatusColor[workOrder['status']] }" /> -->
						<view class="simple-status">
							<u-tag :bg-color="workOrderStatusColor['1']" :text="workOrder['statusstr']" color="#fff"
								size="mini" :border-color="workOrderStatusColor['1']"></u-tag>
						</view>
						<view class="simple-title-text">
							<span>{{ workOrder.title }}</span>
						</view>
					</view>
					<view style="
              background-color: #006cff;
              color: #fff;
              padding: 5rpx 30rpx 5rpx 30rpx;
              border-radius: 30rpx;
              font-size: 20rpx;
            ">
						{{ workOrder["pdname"] }}
					</view>
				</view>
				<view class="simple-card-content">
					<view class="simple-card-content-row">
						<view>
							<view>
								<!-- <u-icon name="manager" /> -->
								<span>&nbsp;创建人：</span>
								<span style="
                    display: inline-block;
                    width: 3.5rem;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  ">{{ workOrder.username }}</span>
							</view>
							<view style="margin-top: 10px">
								<!-- <u-icon name="clock" /> -->
								<span>&nbsp;工单发起日期：</span>
								<span>{{
                  parseTime(workOrder["create" + "time"], "{y}-{m}-{d}")
                }}</span>
							</view>
						</view>
					</view>
					<view v-if="workOrder['operator']" class="simple-card-content-row"
						style="font-size: 12px; color: #606266; font-weight: 500">
						<view class="send-info">
							<span>
								<u-icon name="manager-o" color="#006CFF" />
								<span>&nbsp;经办人：</span>
								<span style="
                    display: inline-block;
                    width: 3.5rem;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  ">{{ workOrder["operator"] }}</span>
							</span>
							<span style="margin-left: 1rem">
								<u-icon name="clock-o" color="#006CFF" />
								<span>&nbsp;发送日期：</span>
								<span>{{ workOrder["task" + "time"] }}</span>
							</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%; height: 100px"></view>

		<u-popup v-model="showScreen" mode="bottom" height="900rpx" :safe-area-inset-bottom="true" border-radius="10">
			<view style="padding: 20rpx;position: relative;">
				<u-form :model="screeningForm" ref="uForm" label-width="150" style="height:600rpx" label-position="top">
					<u-form-item label="工单标题"><u-input v-model="screeningForm.title"
							placeholder="请输入工单标题" /></u-form-item>
					<u-form-item label="工单类型"><u-input v-model="WorkType" type="select" placeholder="请选择工单类型"
							@click="showWorkType = true" /></u-form-item>
					<u-select v-model="showWorkType" :list="pdKeys" valueName="key" labelName="label"
						@confirm="workTypeChange"></u-select>
					<u-form-item label="创建人"><u-input v-model="executor" type="select" placeholder="请选择创建人"
							@click="showPopupOfHandleUserNameCascades = true" /></u-form-item>
					<user-select v-model="showPopupOfHandleUserNameCascades" @city-change="cityChange"></user-select>
					<u-form-item label="创建时间"><u-input v-model="screeningForm.fromdate" type="select"
							placeholder="请选择创建时间" @click="showPopupOfHandleUserNameCascadeTime = true" /></u-form-item>
					<u-picker mode="time" v-model="showPopupOfHandleUserNameCascadeTime" :params="params"
						@confirm="taskTimeChange"></u-picker>
				</u-form>

				<view style="margin-top: 20rpx;">
					<u-button type="primary" shape="circle" @click="onQuery">搜索</u-button>
				</view>
			</view>
		</u-popup>
		<!-- <u-dialog :visible.sync="screeningDialogVisible" title="筛选" :modal-append-to-body="false" :modal="false">
			<u-form ref="formRef" class="label-inner screening-form" :model="screeningForm" label-position="left"
				label-width="80px">
				<u-row>
					<u-col>
						<u-form-item label="工单标题" prop="title">
							<u-input v-model="screeningForm.title" />
						</u-form-item>
						<u-form-item label="流程定义">
							<u-select v-model="screeningForm['pd' + 'key']" :placeholder="' '">
								<u-option v-for="pdItem in pdKeys" :key="pdItem.key" :label="pdItem.name"
									:value="pdItem.key" />
							</u-select>
						</u-form-item>
						<u-form-item label="创建人">
							<u-field v-model="userNameField" is-link readonly
								@click="showPopupOfUserNameCascade = true" />
						</u-form-item>
						<u-form-item label="创建时间" style="flex-direction: column">
							<u-date-picker v-model="screeningForm['from' + 'date']" style="width: 50%" type="date"
								value-format="YYYY-MM-DD" placeholder="开始" :editable="false" />
							<u-date-picker v-model="screeningForm['to' + 'date']" style="width: 50%" type="date"
								value-format="YYYY-MM-DD" placeholder="结束" :editable="false" />
						</u-form-item>
					</u-col>
				</u-row>
			</u-form>
			<u-button type="primary" round style="width: 100%; margin-top: 2rem; height: 2.5rem; font-size: 1rem"
				@click="onQuery">
				确定
			</u-button>
		</u-dialog> -->
		<!-- <u-popup v-model:show="showPopupOfUserNameCascade" round position="bottom">
			<u-cascader v-model="screeningForm.userid" title="请选择所在地区" :closeable="false"
				:options="optionsOfUserNameCascade" :field-names="fieldNamesOfUserNameCascade"
				@finish="onUserNameCascadeFinish" />
		</u-popup> -->
	</view>
</template>

<script>
	import {
		workOrderStatusColor
	} from "../../constants/workOrderConstant";
	import userSelect from '../../components/selelctUser/u-user-select.vue'
	export default {
		components: {
			userSelect
		},
		data() {
			return {
				executor: '',
				WorkType: '',
				showScreen: false,
				showWorkType: false,
				workOrderStatusColor: [],
				value: "",
				workOrderList: [],
				pdKeys: [],
				userNameField: "",
				screeningForm: {
					title: "",
					userid: "",
					deptid: "",
					pdkey: "",
					fromdate: "",
					todate: "",
				},
				params: {
					year: true,
					month: true,
					day: true
				},
				handleUserNameFiud: [],
				screeningDialogVisible: false,
				showPopupOfHandleUserNameCascadeTime: false,
				showPopupOfUserNameCascade: false,
				showPopupOfHandleUserNameCascades: false,
				pdKeyLoading: false,
				userLoading: false,
				workOrderLoading: false,
				optionsOfUserNameCascade: [],
				fieldNamesOfUserNameCascade: {
					text: "label",
					value: "id",
					children: "children",
				},
				form: {
					name: '',
					intro: '',
					sex: ''
				}
			};
		},
		computed: {
			dataLoading() {
				return this.userLoading || this.pdKeyLoading || this.workOrderLoading;
			},
			// workOrderInstance() {
			// 	console.log(
			// 		workOrderInstances[this.$router.currentRoute.name || "default"]
			// 	);
			// 	return workOrderInstances[this.$router.currentRoute.name || "default"];
			// },
		},
		mounted() {
			this.workOrderStatusColor = workOrderStatusColor;
			this.pdKeyLoading = true;
			this.userLoading = true;
			this.getUser()
		},
		methods: {
			// 用户选择
			cityChange(val) {
				console.log(val)
				this.executor = val.province.label + '/' + val.city.label + '/' + val.area.label
				this.screeningForm.userid = val.area.label
			},
			workTypeChange(val) {
				console.log(val)
				this.WorkType = val[0].label
				this.screeningForm.pdkey = val[0].value
			},
			getUser() {
				this.$request('', '/system/wechat/user/treeselect', 'get', {}, {}, ).then(res => {
					this.optionsOfUserNameCascade = res.data;
					this.$request('', '/workorder/wechat/workorder/query/definitions', 'post', {}, {}, ).then(
						res => {
							this.pdKeys = res.data;
							this.queryWorkOrder();
						})
				})
			},
			queryWorkOrder() {
				// this.workOrderLoading = true;
				// let formData = new FormData();
				// for (let key in this.screeningForm) {
				//   formData.append(key, this.screeningForm[key]);
				// }
				this.$request('', '/workorder/wechat/workorder/query/mylist', 'post', this.screeningForm, {}, ).then(
					res => {
						const {
							rows
						} = res;
						this.workOrderList = rows;
					})
			},
			taskTimeChange(val) {
				this.screeningForm.fromdate = val.year + '-' + val.month + '-' + val.day
			},
			onQuery() {
				this.showScreen = false;
				this.queryWorkOrder();
				this.screeningForm = {
					title: "",
					userid: "",
					deptid: "",
					pdkey: "",
					fromdate: "",
					todate: "",
				}
			},
			onShowWorkOrderDetail(workOrder) {
				console.log(this.workOrderInstance);
				let params = {
					workOrderId: workOrder.pid,
				}
				uni.navigateTo({
					url: '/pages/work/detail?params=' + JSON.stringify(params)
				})
			},
			/**
			 * 全部选项选择完毕后，会触发 finish 事件
			 * @param selectedOptions 包含选择的各个节点对象
			 */
			onUserNameCascadeFinish(e) {
				console.log(e);
				var selectedOptions = e.selectedOptions;
				this.showPopupOfUserNameCascade = false;
				const temp_options = selectedOptions.map((option) => option.label);
				if (temp_options.length > 0) {
					this.userNameField = temp_options.join("/");
				} else {
					this.userNameField = "";
				}
			},
			parseTime(time, pattern) {
				if (arguments.length === 0 || !time) {
					return null;
				}
				const format = pattern || "{y}-{m}-{d} {h}:{i}:{s}";
				let date;
				if (typeof time === "object") {
					date = time;
				} else {
					if (typeof time === "string" && /^[0-9]+$/.test(time)) {
						time = parseInt(time);
					} else if (typeof time === "string") {
						time = time
							.replace(new RegExp(/-/gm), "/")
							.replace("T", " ")
							.replace(new RegExp(/\.[\d]{3}/gm), "");
					}
					if (typeof time === "number" && time.toString().length === 10) {
						time = time * 1000;
					}
					date = new Date(time);
				}
				const formatObj = {
					y: date.getFullYear(),
					m: date.getMonth() + 1,
					d: date.getDate(),
					h: date.getHours(),
					i: date.getMinutes(),
					s: date.getSeconds(),
					a: date.getDay(),
				};
				const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
					let value = formatObj[key];
					// Note: getDay() returns 0 on Sunday
					if (key === "a") {
						return ["日", "一", "二", "三", "四", "五", "六"][value];
					}
					if (result.length > 0 && value < 10) {
						value = "0" + value;
					}
					return value || 0;
				});
				return time_str;
			},
		},
	};
</script>

<style lang="scss">
	.work-order-page {
		overflow: scroll;
		position: fixed;
		background-color: #fff;
		height: 100vh;
		width: 100%;
	}

	.work-style {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		margin-top: 10rpx;
	}
</style>